<template>
  <div class="bigScreenModule">
    <div>
      <el-form :inline="true" ref="form" :model="form" label-width="80px">
        <el-form-item label="组件菜单名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item><el-button size="medium">重置</el-button>
          <el-button type="primary" size="medium">查询</el-button></el-form-item>
      </el-form>
    </div>
    <div class="bigScreenModule-group"><el-button type="primary" size="medium">添加菜单</el-button> <el-button type="danger"
        size="medium">删除菜单</el-button></div>
    <div class="bigScreenModule-list">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="name" align="center" label="菜单名称" width="180">
        </el-table-column>
        <el-table-column prop="date" width="180" align="center" label="创建日期">
        </el-table-column>
        <el-table-column prop="count" width="180" align="center" label="组件数量">
        </el-table-column>
        <el-table-column prop="more" align="center" label="菜单描述">
        </el-table-column>
        <el-table-column prop="handle" width="180" align="center" label="操作">
          <template slot-scope="scope">
            <div class="bigScreenModule-list__handle"><el-button
          type="text"
          size="small">
          查看组件
        </el-button>
        <el-button
          type="text"
          size="small">
          修改菜单
        </el-button></div>
      </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bigScreenModule-pagination">
      <el-pagination v-show="total > 0" background :current-page.sync="queryParams.pageNumber"
        :page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'bigScreenModule',
  props: {},
  components: {},
  data() {
    return {
      queryParams: {
        pageSize: 10,
        pageNumber: 1
      },
      total: 3,
      tableData: [
        {
          name:'菜单1',date:'2023-01-01 18:00:00',count:10,more:'这是一个菜单描述'
        },
        {
          name:'菜单2',date:'2023-01-01 18:00:00',count:10,more:'这是一个菜单描述'
        },
        {
          name:'菜单3',date:'2023-01-01 18:00:00',count:10,more:'这是一个菜单描述'
        },
      ],
      form: {
        name: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  destroyed() { },
  methods: {
    handleSizeChange() { },
    handleCurrentChange() { }
  }
}
</script>

<style lang="scss" scoped>
.bigScreenModule {
  background: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;

  ::v-deep .el-form-item {
    width: auto !important;
  }

  ::v-deep .el-form-item__label {
    line-height: 25px !important;
    margin-right: 10px;
  }

  .bigScreenModule-group {
    margin-bottom: 20px;
  }

  .bigScreenModule-pagination {
    margin-top: 20px;
    display: flex;
    flex-direction: row-reverse;
  }
  .bigScreenModule-list{
    .bigScreenModule-list__handle{
      display: flex;
      justify-content: space-evenly;
      ::v-deep .el-button{
        padding: 0px !important;
      }
    }
  }
}
</style>
